<div nz-row class="mb30">
  <button nz-button nzType="primary" nzSize="large" nzShape="circle" (click)="backward()">
    <i nz-icon nzType="arrow-left" nzTheme="outline"></i>
  </button>
</div>

<form nz-form [formGroup]="form" (ngSubmit)="submitForm(form.value)">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>源数据库Host</nz-form-label>
        <nz-form-control [nzErrorTip]="fromHostErrorTpl">
          <input nz-input formControlName="fromHost" placeholder="请输入源数据库Host"/>
          <ng-template #fromHostErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入源数据库Host!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>源数据库端口</nz-form-label>
        <nz-form-control [nzErrorTip]="fromPortErrorTpl">
          <input nz-input formControlName="fromPort" placeholder="请输入源数据库端口"/>
          <ng-template #fromPortErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入源数据库端口!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>源数据库用户名</nz-form-label>
        <nz-form-control [nzErrorTip]="fromUsernameErrorTpl">
          <input nz-input formControlName="fromUsername" placeholder="请输入源数据库用户名"/>
          <ng-template #fromUsernameErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入源数据库用户名!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>源数据库密码</nz-form-label>
        <nz-form-control [nzErrorTip]="fromPasswordErrorTpl">
          <input nz-input formControlName="fromPassword" placeholder="请输入源数据库密码"/>
          <ng-template #fromPasswordErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入源数据库密码!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>目标数据库Host</nz-form-label>
        <nz-form-control [nzErrorTip]="toHostErrorTpl">
          <input nz-input formControlName="toHost" placeholder="请输入目标数据库Host"/>
          <ng-template #toHostErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入目标数据库Host!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>目标数据库端口</nz-form-label>
        <nz-form-control [nzErrorTip]="toPortErrorTpl">
          <input nz-input formControlName="toPort" placeholder="请输入目标数据库端口"/>
          <ng-template #toPortErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入目标数据库端口!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>目标数据库用户名</nz-form-label>
        <nz-form-control [nzErrorTip]="toUsernameErrorTpl">
          <input nz-input formControlName="toUsername" placeholder="请输入目标数据库用户名"/>
          <ng-template #toUsernameErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入目标数据库用户名!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>目标数据库密码</nz-form-label>
        <nz-form-control [nzErrorTip]="toPasswordErrorTpl">
          <input nz-input formControlName="toPassword" placeholder="请输入目标数据库密码"/>
          <ng-template #toPasswordErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入目标数据库密码!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>数据表</nz-form-label>
        <nz-form-control>
          <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
            <i nz-icon nzType="plus"></i>
            添加数据表
          </button>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item nzFlex>
        <nz-form-label nzRequired>描述</nz-form-label>
        <nz-form-control [nzErrorTip]="descriptionErrorTpl">
          <input nz-input formControlName="description" placeholder="请输入描述"/>
          <ng-template #descriptionErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入描述!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6" formArrayName="tables"
         *ngFor="let control of form.controls.tables?.controls; let i = index">
      <nz-form-control [formGroupName]="i">
        <input class="passenger-input" nz-input placeholder="请输入表名" formControlName="name">
        <i *ngIf="i > 0" nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="removeField(i)"></i>
      </nz-form-control>
    </div>
  </div>

  <div nz-row>
    <nz-form-item>
      <nz-form-control [nzOffset]="7" [nzSpan]="12">
        <button nz-button nzType="primary" [disabled]="!form.valid">提交</button>
        <button nz-button (click)="resetForm($event)">重置</button>
      </nz-form-control>
    </nz-form-item>
  </div>

</form>
